<template>
  <div class="showDialogBox">
    <van-dialog v-model:show="showReadDialog" title="阅读报数" show-cancel-button @cancel="closeshowReadDialog">
      <h1 class="red">阅读数可在底部如图所示地方找到：</h1>
      <img src="../assets/reading.png" alt="">
      <h1 class="grey">请输入该文章已有阅读数</h1>
      <p><van-field v-model="readValue" placeholder="请输入已有阅读数" /></p>
      <h2>注意：</h2>
      <p class="orange">1.提高阅读质量，请设置微信信息： 性别/年龄/地址</p>
      <p class="orange">2.文章异常时（比如被封禁）请填0，
        乱报数和滥用填0，很快就会被封禁。
        3.没有阅读数的文章，请不要报数
        4.阅读数过大的，如：1.7万，请填
        17000</p>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, } from "vue";
let showReadDialog = ref(true)
let readValue = ref("")
function closeshowReadDialog() {
  emit("readingReports")
}
// const props = defineProps({
//   isPublishArticlesSon: {
//     type: Boolean,
//     default: true,
//   },
// })
const emit = defineEmits(["readingReports"])
onMounted(() => {

  // 在组件挂载后执行的逻辑，例如初始化数据、订阅事件等
})
</script>

<style lang="less" scoped>
.showDialogBox {
  padding: 30px;
  box-sizing: border-box;

  img {
    width: 100%;
  }

  h1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
    padding: 20px 0;
    box-sizing: border-box;
  }

  p {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #8D8D8D;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  h2 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #AC7B7B;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .red {
    color: #B70101;
    padding: 20px 0;
  }

  .grey {
    color: #8D8D8D;
  }

  .orange {
    color: #C2A3A3;
  }
}

/deep/ .van-dialog {
  padding: 0 20px !important;
  box-sizing: border-box;
}
</style>
